<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <v-card>
            <!-- 卡片的头部 -->
            <v-card-title>
                <!--新增按钮-->
                <v-btn color="primary">新增</v-btn>
                <!--空间隔离组件-->
                <v-spacer></v-spacer>
                <!--搜索框-->
                <!--<v-text-field @keyup.enter="queryBrands" label="输入关键字搜索" v-model="search" append-outer-icon="search" hide-details/>-->
                <v-text-field label="输入关键字搜索" v-model="search" append-outer-icon="search" hide-details/>
            </v-card-title>
            <!--分割线-->
            <v-divider></v-divider>
            <v-data-table
                    :headers="headers"
                    :items="brands"
                    :pagination.sync="pagination"
                    :total-items="totalBrands"
                    :loading="loading"
                    class="elevation-1"
            >
                <template v-slot:items="props">
                    <tr>
                        <td class="text-xs-center">{{ props.item.id }}</td>
                        <td class="text-xs-center">{{ props.item.name }}</td>
                        <td class="text-xs-center"><img :src="props.item.image"/></td>
                        <td class="text-xs-center">{{ props.item.letter }}</td>
                        <td class="text-xs-center">
                            <v-btn color="info">编辑</v-btn>
                            <v-btn color="warning">删除</v-btn>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-card>
    </div>
</template>

<script>

    export default {
        name: "my-brand",
        data() {
            return {
                search: '',
                totalBrands: 0,
                brands: [],
                loading: true,
                pagination: {},
                headers: [
                    {text: '品牌ID', align: 'center', value: 'id', sortable: true},
                    {text: '品牌名称', align: 'center', sortable: false, value: 'name'},
                    {text: '品牌图片', align: 'center', sortable: false, value: 'image'},
                    {text: '品牌首字母', align: 'center', value: 'letter', sortable: true},
                    {text: '操作', align: 'center', sortable: false, value: "id"}
                ]
            };
        },
        created() {
            this.loading = true;
            this.brands = [
                this.queryBrands()
            ];
            //this.totalBrands = this.brands.length;
            this.loading = false;
        },
        watch: { //监视器
            pagination: {  //监视pagination的变化
                deep: true,
                handler() {
                    this.queryBrands();
                }
            },
            search: {  //监视搜索框的变化
                handler() {
                    this.queryBrands();
                }
            }
        },
        methods: {  //方法
            queryBrands() {  //从服务器加载品牌数据的方法
                this.$http.get("/item/brand/page", {
                    params: {
                        page: this.pagination.page,  //当前页
                        rows: this.pagination.rowsPerPage,   //页面大小
                        sortBy: this.pagination.sortBy,   //是否排序
                        desc: this.pagination.descending,  //是否降序
                        key: this.search   //搜索框
                    }
                }).then(resp => {
                    this.brands = resp.data.items;
                    this.totalBrands = resp.data.total;
                    this.loading = false;
                }).catch(() =>{
                    this.$message.error("无数据");
                    this.brands = [];
                    this.totalBrands = 0;
                })
            }
        }

    }
</script>

<style scoped>

</style>